<template>
  <div id="app">
    <!-- 底部导航栏 -->
    <div v-show="a">
      <van-tabbar v-model="active" style="height:60px">
        <van-tabbar-item name="home" icon="home-o"
          ><van-button @click="go_home" style="width:60px;height:30px">主页</van-button></van-tabbar-item
        >
        <van-tabbar-item name="search" icon="chat-o"
          ><van-button @click="go_about" style="width:60px;height:30px">交流</van-button></van-tabbar-item
        >
        <van-tabbar-item name="friends" icon="bag-o"
          ><van-button @click="go_gwc" style="width:90px;height:30px">购物车</van-button></van-tabbar-item
        >
        <van-tabbar-item name="setting" icon="user-o"
          ><van-button @click="go_GR" style="width:40px;height:30px">我</van-button></van-tabbar-item
        >
      </van-tabbar>
      <!-- 底部导航栏 -->
      <router-view />
    </div>
    <!-------------------------- 登录框----------------- -->
    <div v-show="b" style="margin-top: 30%;border: 1px solid black;">
      <van-form >
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          
        />
        <div style="margin: 16px">
          <van-button round block type="info" @click="denglu" style="width:100px;float: left;"
            >登录</van-button
          >
          <van-button round block type="info" @click="zhuce" style="width:100px;float: right;"
            >注册</van-button
          >
        </div>
      </van-form>
     </div>  <!--  ------------------------ 登录框----------------- -->
  </div>
</template>
<script>
import { Toast } from "vant";
import api from '@/api/api'

export default {
  data() {
    return {
      username:'',//用户名输入框
      password:'',//密码输入框
      a: false,
      b: true,
      active: 0,
      userid: '',//此id是用户表的id
      usergwc:'',
      user:{
        name:'',
        password:'',
        gwcid:''
      }
    };
  },
  created() {
    if (this.$route.params && this.$route.params.id) {
      this.userid = this.$route.params.id;
      console.log(this.userid);
      if (this.$route.params.id) {
        this.a =true
        this.b = false
      }
    }
  },
  methods: {
    denglu(){
      api.getOne(this.username,this.password).then(res=>{
        console.log(res)
        console.log(res.data.length)//长度为1代表登录成功，为0则登录失败
        // console.log(res.data[0].id)
        if(res.data.length ==1){
          this.userid = res.data[0].id
          this.usergwc = res.data[0].gwcid
          this.a = true
          this.b = false
          Toast('登录成功')
          this.$router.push({ path: '/home/'+this.userid })
        }
        else
        {
          Toast('登录失败')
        }
      })
    },
    go_home(){
       this.$router.push({ path: '/home/'+this.userid })
    },
    go_gwc(){
       this.$router.push({ path: '/GWC/'+this.userid })
    },
    go_GR(){
      this.$router.push({ path: '/GR/'+this.userid })
    },
    go_about(){
      this.$router.push({ path: '/about/'+this.userid })
    },
    zhuce(){
    let U ={
      name:this.username,
      password:this.password
    }
    api.insert(U)
    Toast("注册成功")
  }
  },
  
};
</script>


<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
